<template>
  <div class="app-container">
    <vxe-form
      ref="queryForm"
      class="queryForm"
      :data="query.baseParams"
      title-align="right"
      title-width="90"
      :rules="queryFormRules"
      @submit="confirmBaseQueryData"
    >
      <vxe-form-item field="skuName" title="产品名称" :item-render="{}" :span="isMobile?24:6">
        <template #default="{data}">
          <el-input v-model="data.skuName" clearable />
        </template>
      </vxe-form-item>
      <vxe-form-item field="skuTitle" title="产品简称" :item-render="{}" :span="isMobile?24:6">
        <template #default="{data}">
          <el-input v-model="data.skuTitle" clearable />
        </template>
      </vxe-form-item>
      <vxe-form-item field="taxRate" title="税率" :item-render="{}" :span="isMobile?24:6">
        <template #default="{data}">
          <el-input v-model="data.taxRate" clearable />
        </template>
      </vxe-form-item>
      <vxe-form-item field="factoryPrice" title="出厂价" :item-render="{}" :span="isMobile?24:6">
        <template #default="{data}">
          <el-input v-model="data.factoryPrice" clearable />
        </template>
      </vxe-form-item>
      <vxe-form-item field="excludingTaxCosts" title="成本不含税" :item-render="{}" :span="isMobile?24:6">
        <template #default="{data}">
          <el-input v-model="data.excludingTaxCosts" clearable />
        </template>
      </vxe-form-item>
      <vxe-form-item field="freight" title="干线运费" :item-render="{}" :span="isMobile?24:6">
        <template #default="{data}">
          <el-input v-model="data.freight" clearable />
        </template>
      </vxe-form-item>
      <vxe-form-item>
        <template #default>
          <vxe-button status="primary" type="submit">查询</vxe-button>
          <vxe-button type="button" @click="restBaseForm">重置</vxe-button>
        </template>
      </vxe-form-item>
    </vxe-form>
    <vxe-toolbar custom export>
      <template #buttons>
        <vxe-button status="success" @click="showModal('create',{})">新增</vxe-button>
        <vxe-button status="primary" @click="showUploadDialog('/finance/budget/upload')">批量导入</vxe-button>
      </template>
    </vxe-toolbar>
    <vxe-table
      ref="vxeTable"
      :loading="tableLoading"
      :export-config="{}"
      :data="tableData"
      :column-config="{useKey:true}"
      :row-config="{useKey:true}"
      @sort-change="tableSortChange"
    >
      <vxe-column type="seq" align="right" width="60" title="序号" />
      <vxe-column field="id" title="代码" sortable width="120" />
      <vxe-column field="skuName" title="产品名称" sortable min-width="150" />
      <vxe-column field="skuTitle" title="产品简称" sortable width="100" />
      <vxe-column field="taxRate" title="税率" sortable align="right" width="90">
        <template #default="{row}">
          {{ row.taxRate ==0?'': row.taxRate }}
        </template>
      </vxe-column>
      <vxe-column field="factoryPrice" title="出厂价" sortable align="right" width="90" />
      <vxe-column field="excludingTaxCosts" title="成本不含税" sortable align="right" width="110" />
      <vxe-column field="mle" title="毛利额（不含税）" sortable align="right" width="150" />
      <vxe-column field="xsmll" title="销售毛利率" sortable align="right" width="110">
        <template #default="{row}">
          {{ doMath('numberMul',row.xsmll,100)+'%' }}
        </template>
      </vxe-column>
      <vxe-column field="freight" title="干线运费" sortable align="right" width="100" />
      <vxe-column field="createByName" title="创建人" sortable :visible="false" />
      <vxe-column field="updateByName" title="修改人" sortable :visible="false" />
      <vxe-column field="createTime" title="创建时间" sortable :visible="false" />
      <vxe-column field="updateTime" title="修改时间" sortable :visible="false" />
      <vxe-column field="op" title="操作" width="150" fixed="right">
        <template #default="{row}">
          <vxe-button type="text" status="primary" @click="showModal('update',row)">编辑</vxe-button>
          <vxe-button type="text" status="danger" @click="deleteTableRow(row.id)">删除</vxe-button>
          <vxe-button type="text" status="primary" @click="showModal('test',row)">测算</vxe-button>
        </template>
      </vxe-column>
    </vxe-table>
    <vxe-pager
      background
      :current-page.sync="query.page.currentPage"
      :page-size.sync="query.page.pageSize"
      :total="tableTotalRow"
      :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
      @page-change="changePage"
    />
    <create-dialog
      v-if="dialogs.create.visible"
      v-model="dialogs.create.visible"
      :form-data="dialogs.create.formData"
      @success="loadTable"
    />
    <update-dialog
      v-if="dialogs.update.visible"
      v-model="dialogs.update.visible"
      :form-data="dialogs.update.formData"
      @success="loadTable"
    />
    <test-dialog
      v-if="dialogs.test.visible"
      v-model="dialogs.test.visible"
      :form-data="dialogs.test.formData"
    />
    <excel-import ref="excelImport" @success="loadTable" />
  </div>
</template>

<script>
import Api from '@/api/finance/budget'
import CreateDialog from './dialog/CreateDialog'
import UpdateDialog from './dialog/UpdateDialog'
import TestDialog from './dialog/TestDialog'
import { VxeTableMixin } from '@/mixins/vxe/VxeTableMixin'
import { VxeSysDataMixin } from '@/mixins/vxe/VxeSysDataMixin'
import ExcelImport from '@/components/Upload/ExcelImport'
export default {
  name: 'FinanceBudget',
  components: { CreateDialog, UpdateDialog, ExcelImport, TestDialog },
  mixins: [VxeTableMixin, VxeSysDataMixin],
  data() {
    return {
      api: {
        query: Api.page,
        delete: Api.delete
      },
      query: {
        baseParams: {
          skuName: undefined,
          skuTitle: undefined,
          taxRate: undefined,
          factoryPrice: undefined,
          excludingTaxCosts: undefined,
          freight: undefined,
          createByName: undefined,
          updateByName: undefined,
          createTime: undefined,
          updateTime: undefined
        }
      },
      dialogs: {
        test: {
          visible: false,
          formData: {}
        }
      }
    }
  },
  computed: {

  },
  mounted() {
    this.confirmBaseQueryData()
  },
  methods: {

  }
}
</script>

<style>

</style>
